<template>
  <view class="container">
    <!-- 画布 -->
    <canvas
      :canvas-id="canvasId"
      :style="{ width: canvasSize + 'rpx', height: canvasSize + 'rpx' }"
      class="canvas"
    ></canvas>
    <!-- 文字 -->
    <view class="progress-text" :style="{ fontSize: textSize + 'rpx', color: textColor,width: canvasSize*0.8 + 'rpx',height: canvasSize*0.8 + 'rpx',backgroundColor:progressBackColor }">
      <view class="title">{{ title }}</view>
      <view class="value">{{ progressText }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 进度值（0-100）
    progress: {
      type: Number,
      default: 0,
      validator: (value) => value >= 0 && value <= 100,
    },
    // 圆环宽度（rpx）
    lineWidth: {
      type: Number,
      default: 10,
    },
    // 圆环背景颜色
    backgroundColor: {
      type: String,
      default: '#e0e0e0',
    },
    // 圆环进度颜色
    progressColor: {
      type: String,
      default: '#007AFF',
    },
	// 内容区背景颜色
	progressBackColor:{
		type: String,
		default: '#007AFF',
	},
    // 文字颜色
    textColor: {
      type: String,
      default: '#000000',
    },
    // 文字大小（rpx）
    textSize: {
      type: Number,
      default: 20,
    },
    // 画布大小（rpx）
    canvasSize: {
      type: Number,
      default: 200,
    },
    // 标题文字
    title: {
      type: String,
      default: '进度',
    },
	// progress
	progressText:{
		type: String,
		default: '0%',
	}
  },
  data() {
    return {
      canvasId: 'progressCanvas', // canvas ID
      ctx: null, // canvas 上下文
    };
  },
  mounted() {
    this.ctx = uni.createCanvasContext(this.canvasId, this);
    this.drawProgress();
  },
  watch: {
    // 监听 progress 变化，重新绘制
    progress() {
      this.drawProgress();
    },
  },
  methods: {
    // 绘制进度条
    drawProgress() {
      const { ctx, canvasSize, lineWidth, backgroundColor, progressColor, progress } = this;

      // 将 rpx 转换为 px
      const { width, height } = this.rpxToPx(canvasSize);
      const radius = (width - lineWidth) / 2; // 半径

      // 清空画布
      ctx.clearRect(0, 0, width, height);

      // 绘制背景圆
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, radius, 0, 2 * Math.PI);
      ctx.strokeStyle = backgroundColor;
      ctx.lineWidth = lineWidth;
      ctx.stroke();

      // 绘制进度圆
      ctx.beginPath();
      const endAngle = (progress / 100) * 2 * Math.PI - Math.PI / 2;
      ctx.arc(width / 2, height / 2, radius, -Math.PI / 2, endAngle);
      ctx.strokeStyle = progressColor;
      ctx.lineWidth = lineWidth;
      ctx.stroke();

      // 绘制到画布
      ctx.draw();
    },
    // 将 rpx 转换为 px
    rpxToPx(rpx) {
      const screenWidth = uni.getSystemInfoSync().screenWidth;
      const px = (rpx / 750) * screenWidth;
      return { width: px, height: px };
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 99;
}

.progress-text {
  position: absolute;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.title {
  font-size: 0.8em; /* 标题字体稍小 */
  color: inherit;
}

.value {
  font-size: 1.2em; /* 值字体稍大 */
  color: inherit;
}
</style>